<!-- 教师管理页面 -->
<template>
	<div class="all">
		<el-button @click="addStudent()" type="primary">添加教师</el-button>
		<div id="searchsex">
			<el-select v-model="selectsex">
				<el-option label="性别不限" value="性别不限"></el-option>
				<el-option label="男" value="男"></el-option>
				<el-option label="女" value="女"></el-option>
			</el-select>
		</div>

		<div id="searchdiv">
			<el-input placeholder="请输入内容" v-model="inputsearch" class="input-with-select">
				<el-select v-model="select" slot="prepend" style="width: 120px;">
					<el-option label="教师姓名" value="教师姓名"></el-option>
					<el-option label="联系方式" value="联系方式"></el-option>
				</el-select>
				<el-button @click="searchStudent()" slot="append" icon="el-icon-search"></el-button>
			</el-input>
		</div>
		<div style="height: 10px;"></div>

		<!-- 这里是教师信息的表格!记得将prop修改为对应的属性值! -->
		<el-table :data="pagination.records" border>
			<el-table-column fixed="left" prop="userId" label="教师编号"></el-table-column>
			<el-table-column prop="userName" label="教师姓名"></el-table-column>
			<el-table-column prop="userTel" label="联系方式"></el-table-column>
			<el-table-column prop="userSex" label="性别"></el-table-column>
			<el-table-column label="头像">
				<template width="40" slot-scope="scope">
				    <el-image :src="scope.row.userPic" style="width: 100px; height: 100px"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="显示状态" width="100">
				<template slot-scope="scope">
					<el-tag :type="scope.row.userCondition==1 ? 'success' : 'danger'">{{scope.row.userCondition ==1 ? "显示" : "禁用"}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="400px">
				<template slot-scope="scope">
					<el-button @click="resetPwd(scope.row.userId)" type="warning" size="small">重置密码</el-button>
					<el-button @click="resetImage(scope.row.userId)" type="warning" size="small">重置头像</el-button>
					<el-button @click="checkGrade(scope.row.userId)" type="primary" size="small">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 这里是分页! -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
		 :page-sizes="[6, 10]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
		 class="page">
		</el-pagination>
		<!-- 编辑教师信息框 -->
		<el-dialog title="编辑教师信息" :visible.sync="dialogVisible" width="25%" :before-close="handleClose">
			<section class="update">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="教师姓名">
						<el-input v-model="form.userName"></el-input>
					</el-form-item>
					<el-form-item label="联系方式">
						<el-input v-model="form.userTel"></el-input>
					</el-form-item>
					<el-form-item label="性别">
						<el-select v-model="form.userSex" placeholder="请选择性别" style="width: 308px;">
							<el-option label="男" value="男"></el-option>
							<el-option label="女" value="女"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="显示状态">
						<el-select v-model="form.userCondition" placeholder="请选择状态" style="width: 308px;">
							<el-option label="显示" :value="1"></el-option>
							<el-option label="禁用" :value="0"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</section>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit()">修 改</el-button>
			</span>
		</el-dialog>
		<!-- 增加教师信息框 -->
		<el-dialog title="增加教师信息" :visible.sync="dialogVisibleadd" width="25%" :before-close="handleClose">
			<section class="update">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="教师姓名">
						<el-input v-model="form.userName"></el-input>
					</el-form-item>
					<el-form-item label="联系方式">
						<el-input v-model="form.userTel"></el-input>
					</el-form-item>
					<el-form-item label="性别">
						<el-select v-model="form.userSex" placeholder="请选择性别" style="width: 308px;">
							<el-option label="男" value="男"></el-option>
							<el-option label="女" value="女"></el-option>
						</el-select>
					</el-form-item>

				</el-form>
			</section>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleadd=false">取 消</el-button>
				<el-button type="primary" @click="add()">增 加</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				selectsex: '性别不限', //性别下拉框
				select: '教师姓名', //下拉框值
				inputsearch: '', //搜索框值
				pagination: {
					//分页后的考试信息
					current: 1, //当前页
					total: null, //记录条数
					size: 6, //每页条数
				},
				dialogVisible: false, //编辑信息对话框显示
				dialogVisibleadd: false, //增加信息对话框显示
				form: {
					userRole: 1
				}, //编辑教师信息时用的
				datainfo: '',
			};
		},
		created() {
			this.getStudentInfo();
		},
		methods: {
			getStudentInfo() {
				//分页查询所有教师信息
				this.$axios(`/api/getinput`, {
					params: {
						inputsearch: this.inputsearch, //用户输入的值
						userRole: 1, //用户权限
						page: this.pagination.current, //当前页码
						limit: this.pagination.size, //每页输出的条数
						select: this.select, //用户选择的查询方式
						selectsex: this.selectsex, //性别选择
					}
				}).then(res => {
					console.log(res);
					for (var i = 0; i < res.data.records.length; i++) {
						res.data.records[i].userPic = require("../../assets/img/" + res.data.records[i].userPic + ".jpg")
					}
					this.pagination = res.data;
				}).catch(error => {});
			},
			//改变当前记录条数
			handleSizeChange(val) {
				this.pagination.size = val;
				this.getStudentInfo();
			},
			//改变当前页码，重新发送请求
			handleCurrentChange(val) {
				this.pagination.current = val;
				this.getStudentInfo();
			},
			checkGrade(userId) { //修改教师信息
				this.dialogVisible = true

				//获取教师的信息
				this.$axios(`/api/getu`, {
					params: {
						userId: userId
					}
				}).then(res => {
					console.log(res);
					//对内容进行判断
					this.form = res.data;
				})
			},

			deleteById(studentId) { //删除当前教师
				this.$confirm("确定删除当前教师吗？删除后无法恢复", "Warning", {
					confirmButtonText: '确定删除',
					cancelButtonText: '算了,留着吧',
					type: 'danger'
				}).then(() => { //确认删除
					this.$axios({
						url: `/api/student/${studentId}`,
						method: 'delete',
					}).then(res => {
						this.getStudentInfo()
					})
				}).catch(() => {})
			},
			//重置密码
			resetPwd(userId) { //根据id获取教师的信息
				//获取教师的信息
				this.$axios(`/api/getu`, {
					params: {
						userId: userId
					}
				}).then(res => {
					console.log(res);
					//开始重置密码
					this.startResetPwd(res.data);
				});

			},
			//开始重置密码
			startResetPwd(student) {

				student.userPwd = "123456";
				// 重置密码  123456
				this.$axios({
					url: '/api/updpwd',
					method: 'post',
					data: student
				}).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.$message({
							message: '密码重置成功',
							type: 'success'
						})
					}
					this.getStudentInfo();
				})

			},
			// 重置头像
			resetImage(userId) {
				//获取教师的信息
				this.$axios(`/api/getu`, {
					params: {
						userId: userId
					}
				}).then(res => {
					console.log(res);
					//开始重置密码
					this.startResetImage(res.data);
				});
			},
			//开始重置密码
			startResetImage(student) {

				student.userPic = "header";
				// 重置密码  123456
				this.$axios({
					url: '/api/updu',
					method: 'post',
					data: student
				}).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.$message({
							message: '头像重置成功',
							type: 'success'
						})
					}
					this.getStudentInfo();
				})

			},
			addStudent() { // 打开增加教师框
				//清空当前对象
				this.form = {
					userRole: 1
				}

				this.dialogVisibleadd = true

			},
			submit() { //提交更改
				//未填写用户名
				if (this.form.userName == null || this.form.userName == '') {
					this.$message({
						type: 'error',
						message: '请输入教师姓名'
					})
				} else if (this.form.userTel == null || this.form.userTel == '') {
					this.$message({
						type: 'error',
						message: '请输入联系方式'
					})
				} else if (this.form.userSex == null || this.form.userSex == '') {
					this.$message({
						type: 'error',
						message: '请选择性别'
					})
				} else {
					//判断手机号
					var reg = /^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$/;

					var flag = reg.test(this.form.userTel);

					if (!flag) {
						this.$message({
							type: 'error',
							message: '手机号错误，请重新输入！'
						})
					} else {
						this.dialogVisible = false
						console.log(this.form)
						this.$axios({
							url: '/api/updu',
							method: 'post',
							data: {
								...this.form
							}
						}).then(res => {
							console.log(res)
							if (res.data.code == 200) {
								this.$message({
									message: '更新成功',
									type: 'success'
								})
							}
							this.getStudentInfo();
						})
					}

				}

			},
			add() { // 增加教师
				//未填写用户名
				if (this.form.userName == null || this.form.userName == '') {
					this.$message({
						type: 'error',
						message: '请输入教师姓名'
					})
				} else if (this.form.userTel == null || this.form.userTel == '') {
					this.$message({
						type: 'error',
						message: '请输入联系方式'
					})
				} else if (this.form.userSex == null || this.form.userSex == '') {
					this.$message({
						type: 'error',
						message: '请选择性别'
					})
				} else {
					//判断手机号
					var reg = /^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$/;

					var flag = reg.test(this.form.userTel);

					if (!flag) {
						this.$message({
							type: 'error',
							message: '手机号错误，请重新输入！'
						})
					} else {
						this.dialogVisibleadd = false
						this.$axios({
							url: '/api/addu',
							method: 'post',
							//data数据是form里面的数据
							data: {
								...this.form
							}
						}).then(res => {
							console.log(res)
							if (res.data.code == 200) {

								this.$message({

									message: '数据添加成功',
									type: 'success'
								});
								//清空当前对象
								this.form = {
									userRole: 1
								}
								//数据添加成功跳转
								//this.$router.push({path: '/studentManage'})
								this.getStudentInfo();
								userRole: 2
							}
						})
					}

				}

			},
			//搜索点击事件
			searchStudent() {
				console.log(this.select) // 下拉框值
				console.log(this.selectsex) // 下拉框值
				console.log(this.inputsearch) // 搜索框值

				//分页查询所有教师信息
				this.$axios(`/api/getinput`, {
					params: {
						inputsearch: this.inputsearch, //用户输入的值
						userRole: 1, //用户权限
						page: this.pagination.current, //当前页码
						limit: this.pagination.size, //每页输出的条数
						select: this.select, //用户选择的查询方式
						selectsex: this.selectsex, //性别选择
					}
				}).then(res => {
					console.log(res);
					for(var i=0; i<res.data.records.length; i++){
							res.data.records[i].userPic = require("../../assets/img/"+res.data.records[i].userPic+".jpg")
					}
					this.pagination = res.data;
				}).catch(error => {});

			},
			handleClose(done) { //关闭提醒
				this.$confirm('确认关闭？')
					.then(_ => {
						this.form = {
							userRole: 1
						} // 关闭框后清空值
						done();
					}).catch(_ => {});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.all {
		padding: 0px 40px;

		.page {
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.edit {
			margin-left: 20px;
		}

		.el-table tr {
			background-color: #dd5862 !important;
		}
	}

	.el-table .warning-row {
		background: #000 !important;
	}

	.el-table .success-row {
		background: #dd5862;
	}

	#searchdiv {
		width: 400px;
		display: inline-block;
	}

	#searchsex {
		width: 110px;
		display: inline-block;
		margin-left: 60%;
	}
</style>
